<template>
  <div>
    <el-card class="box-card" >
      <div slot="header" class="clearfix" style="height: 50px" >
        <span style="font-size:35px" >客户对账</span>
<!--        <el-button style="float: right; width: 100px;height:50px;padding: 3px 0" type="primary"   >生成收款单</el-button>-->
        <el-popover
          placement="right"
          width="1020"
          trigger="click"
          v-model="visible">
          <h1 align="center" style="color: red">回款单</h1><br>
          <h3>未付款所有账单查询</h3>
          <el-card class="box-card">
<!--            <div slot="header" class="clearfix">-->
<!--              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
<!--              <span style="font-size: 20px">请您输入联系人:</span><el-input  style="width: 500px"-->
<!--                                                                             placeholder="请输入联系人"></el-input><br>-->
<!--              <span style="font-size: 20px">请输入收款描述:-->
<!--              </span><el-input type="textarea" :rows="2" placeholder="请输入收款描述" style="width: 500px"></el-input>-->
<!--            </div>-->
          </el-card>
          <el-table :data="findList1" v-loading="loading1" :row-class-name="tableRowClassName" >
            <el-table-column width="250" property="orders.orderNum" label="订单信息"></el-table-column>
            <el-table-column width="150" property="cliName" label="联系人"></el-table-column>
            <el-table-column width="150" property="orders.orderMoney" label="订单金额"></el-table-column>
            <el-table-column width="150" property="orders.orderPaySta" label="状态">
                <template slot-scope="scope" >
                    <el-tag :type="scope.row.orders.orderPaySta=='0'?'':'danger'">
                        <span>{{scope.row.orders.orderPaySta=='0'?'已付款':'未付款'}}</span></el-tag>
                </template>
            </el-table-column>
            <el-table-column width="150" property="orders.orderPeople" label="收货人"></el-table-column>
            <el-table-column width="150" property="cliAccounts" label="结算方式"></el-table-column>
          </el-table>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="primary" @click="quxiao" round >取消</el-button>
            <el-button type="primary" size="mini" @click="dowloadExcel" round icon="el-icon-s-promotion">导出</el-button>
          </div>
          <el-button slot="reference" style="margin-left: 1000px"  type="danger" round icon="el-icon-s-promotion"
          >点击生成回款单/导出数据</el-button>
        </el-popover>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="keyword" class="demo-form-inline" ref="searchForm">
          <el-form-item label="联系人" prop="cliName" >
            <el-input size="small" clearable v-model="keyword.cliName" placeholder="联系人" ></el-input>
          </el-form-item>
          <el-form-item label="客户名称" prop="cliKh">
            <el-input size="small" clearable v-model="keyword.cliKh" placeholder="客户名称"></el-input>
          </el-form-item>
          <el-form-item label="付款状态"  >

            <el-select v-model="keyword.orderPaySta" placeholder="请选择付款状态" @change="search"  >
              <el-option v-for="roleType in aList"  :label="roleType.label" :value="roleType.value"  >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" size="small"  @click="search" icon="el-icon-search">查询</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="resetsearchForm('searchForm')">重置</el-button>
        </el-form>
        <el-table v-loading="loading" :data="findList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="客户名称" align="center" prop="cliKh" />
          <el-table-column label="联系人" align="center" prop="cliName"/>
          <el-table-column label="联系电话" align="center" prop="cliPhone" />
          <el-table-column label="订单编号" align="center" prop="orders.orderNum" />
          <el-table-column label="订单金额" align="center" prop="orders.orderMoney" />
          <el-table-column label="收货人" align="center" prop="orders.orderPeople"/>
          <el-table-column label="状态" align="center" prop="orders.orderPaySta">
            <template slot-scope="scope" >
              <el-tag :type="scope.row.orders.orderPaySta=='0'?'':'danger'"  >
                <span>{{scope.row.orders.orderPaySta=='0'?'已付款':'未付款'}}</span></el-tag>
            </template>
          </el-table-column>
          <el-table-column label="结算方式" align="center" prop="cliAccounts" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope" >
              <el-button
                size="medium"
                type="text"
                icon="el-icon-s-promotion"
                @click="handleDelete(scope.row)"
                v-if="scope.row.orders.orderPaySta!=0"
              >生成回款单</el-button>
            </template>
          </el-table-column>
        </el-table>


        <el-dialog
          title="你瞅啥"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">>
          <span>双表Excel导出不了 不会 不生成了就这吧 头疼 啧啧啧</span><br>
          <span style="font-size: 50px ; color:red">瞅你咋地！！！</span>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 8, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { find31, oneList, twoList } from '@/api/finanec'

export default {
  data(){
    return{
      dialogVisible:false,
      visible:false,
      loading:true,
      loading1:true,
      findList:[],
      findList1:[],
      list:[],
      aList:[],
      pageNum:1,
      pageSize:8,
      currentPage:1,
      total:0,
      keyword:{
        cliKh:null,
        cliName:null,
        orderPaySta:null
      },
      client1:{
        cliKh:null,
        cliName:null,
        cliHome:null,
        cliPhone:null,
        cliSalesman:null
      }
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }else if (rowIndex === 5){
        return 'warning-row';
      }else if (rowIndex === 7){
        return 'success-row';
      }
      return '';
    },
    handleClose(){

    },
    fetchData(){
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        cliName: this.keyword.cliName,
        cliKh: this.keyword.cliKh,
        orderPaySta: this.keyword.orderPaySta
      }
      twoList(params).then(res=>{
        let pageInfo = res.data;
        this.loading = false;
        this.findList = res.data;
        this.findList = pageInfo.list;
        console.log(pageInfo.list)
        this.total = pageInfo.total
      })
    },
    fetchData1(){
      oneList().then(res=>{
        this.loading1 = false;
        this.findList1 = res.data;
      })
    },
    fetchFeedbackPersons() {
      // 模拟异步请求，实际场景中应该使用 axios 或 fetch 等工具发起真实请求
      setTimeout(() => {
        console.log('key + ------->' +this.label)
        // 假设这里是从后端获取的数据，格式如 [{ id: 1, label: '已处理', value: 'processed' }, ...]
        this.list = [
          { label: '已付款', value: '0' },
          { label: '未付款', value: '1' },
        ];
        this.aList=this.list
      }, 50); // 模拟1秒后获取数据
    },
    //导出按钮
    dowloadExcel(){
      this.$confirm('确定导出数据吗？','信息',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        window.location.href="http://localhost:8088/finance/excel"
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消导出数据'
        })
      })
    },
    //取消按钮
    quxiao(){
      this.visible=false
    },
    find(){
      find31().then(res=>{
        this.list=res.data
      })
    },
    //分页
    handleSizeChange(val){
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.fetchData()
    },

    //分页
    handleCurrentChange(val){
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.fetchData()
    },
    // 生成回款单
    handleDelete(){
      this.dialogVisible=true
    },

    //多选框
    handleSelectionChange(val){
    },

    //查询按钮
    search(){
      this.fetchData()
    },
    //重置按钮
    resetsearchForm(formName){
      this.$refs[formName].resetFields();
      this.keyword.cliName=null
      this.keyword.orderPaySta=null
      this.fetchData()
    },

  },
  created() {
    this.fetchData()
    this.find()
    this.fetchData1()
    this. fetchFeedbackPersons()

  }
}
</script>

<style>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
